<template>
  <div class="home">
    <div class="top">
      <h1>欢迎使用好租房平台</h1>
      <span>在输入框中搜索你钟意的房源吧！</span>
      <div class="search">
        <el-form :inline="true" :model="formSearch" class="formSearch">
          <el-form-item>
            <div class="city">居住城市</div>
            <el-select v-model="formSearch.city" placeholder="请选择城市" @change="handleCityChange">
              <el-option label="成都市" value="成都市"></el-option>
              <el-option label="北京市" value="北京市"></el-option>
              <el-option label="上海市" value="上海市"></el-option>
              <el-option label="杭州市" value="杭州市"></el-option>
              <el-option label="重庆市" value="重庆市"></el-option>
              <el-option label="广州市" value="广州市"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="area">区域</div>
            <el-select v-model="formSearch.area" filterable placeholder="请选择区域">
              <el-option
                  v-for="item in communityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="type">房屋类型</div>
            <el-select v-model="formSearch.type" placeholder="房屋类型">
              <el-option label="整租" value="整租"></el-option>
              <el-option label="合租" value="合租"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="rent">月租金</div>
            <el-select v-model="formSearch.monthRent" class="nr1" placeholder="请选择满足你的月租金范围">
              <el-option label="1000元以下" value="1000"></el-option>
              <el-option label="1000-2500元" value="2500"></el-option>
              <el-option label="2500-3500元" value="3500"></el-option>
              <el-option label="3500-5000元" value="5000"></el-option>
              <el-option label="5000元以上" value="999999"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="padding-top: 10px">
            <!--          <div>查询</div>-->
            <el-button class="btnSearch" type="primary" @click="startSearch">开始查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

<!--     推荐房源 -->
    <div class="Recommend">
      <div class="whole">
        <div class="title">
          <h1>推荐房源</h1>
          <span>好租房平台每天通过数据统计和分析，为你推荐评分较高和价格适宜的房源信息，欢迎你使用好租房平台</span>
        </div>
        <div class="items">
          <HouseItem v-for="item in list" :key="item.id" :item="item"></HouseItem>
        </div>
        <div class="more">
          <el-button type="primary" @click="more"> 更多房源 <i class=" el-icon-right "></i></el-button>
        </div>
      </div>
    </div>
  </div>



</template>

<script>
import HouseItem from "@/components/houseItem";
import axios from "@/util/request";

export default {
  name: 'Home',
  components: {HouseItem},
  //页面加载完成之后触发
  mounted() {
    this.getHouseInfo()
  },
  data() {
    return {
      formSearch: {
        city: '',
        area: '',
        type: '',
        rent: ''
      },
      list: [],
      allList:[],
      communityOptions: [], // 区域选项
      communityMap: {
        '成都市': ['温江区', '郫都区', '新都区', '双流区', '武侯区'],
        '北京市': ['朝阳区', '海淀区', '西城区', '东城区'],
        '上海市': ['浦东新区', '静安区', '黄浦区'],
        '杭州市': ['西湖区', '上城区', '下城区'],
        '重庆市': ['渝中区', '江北区', '沙坪坝区', '九龙坡区'],
        '广州市': ['天河区'],
      }
    };
  },
  methods: {
    //城市和区域联动
    handleCityChange(city) {
      this.formSearch.area = '';//清空区域内容
      this.communityOptions = this.communityMap[city] || []
    },
    getHouseInfo(){
      axios({
        url: 'http://localhost:8090/house/listAll',
        method: 'get',
      }).then(res => {
        //console.log(res.data)
       if (res.code === '200') {
          //this.list = res.data.slice(0,6)
         this.list = res.data.map(item => {
           if (typeof item.imgUrl === 'string') {
             try {
               item.imgUrl = JSON.parse(item.imgUrl); // 解析为数组
             } catch (e) {
               item.imgUrl = [item.imgUrl]; // 如果解析失败，转为单元素数组
             }
           }
           return item;
         }).slice(0, 6);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    more(){
      this.$router.push({
        path: '/index/rentType'
      })
    },
    startSearch(){
      this.$router.push({
        path: '/index/rentType',
        query: {
          city: this.formSearch.city?this.formSearch.city:'',
          area: this.formSearch.area?this.formSearch.area:'',
          type: this.formSearch.type?this.formSearch.type:'',
          monthRent: this.formSearch.monthRent?this.formSearch.monthRent:'',
        }
      })
    }
  },
}
</script>
<style scoped>
/*整体背景*/
.home{
  min-height: 750px;
  background-color: #f8f9fe;
}
/*搜索框和背景*/
.top{
  width: 100%;
  height: 550px;
  background-image: url("@/assets/background5.jpeg");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top h1{
  font-size: 70px;
  color: white;
  font-weight: 800;

}

.top span{
  font-size: 20px;
  color: white;
  padding: 20px 0;
}

.search{
  background-color: white;
  width: 1000px;
  height: 70px;
  box-sizing: border-box;
  padding: 0 6px;
}

.formSearch{
  display: flex;
  justify-content: space-between;
}

.nr1{
  width:250px
}

.city{
  line-height: 20px;
}

.area{
  line-height: 20px;
}

.type{
  line-height: 20px;
}

.rent{
  line-height: 20px;
}

.btnSearch{
  width: 180px;
  height: 50px;
  border: none;
  background-color: #fa5d03;
}

.btnSearch:hover{
  background-color: #fa5d03;
}

.Recommend{
  padding: 0 300px 50px 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}

.whole{
  width: 1050px;
}

.items{
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.items> :nth-child(2),

.items> :nth-child(5),

.items> :nth-child(7) {
  margin-right: 45px;
  margin-left: 45px;
}

.items> :nth-child(-n+3) {
  margin-bottom: 30px;
}

.title{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.title h1{
  font-size: 30px;
  font-weight: 600;
}

.title span{
  font-size: 20px;
  color: #777;
  margin-top: 10px;
}

.more{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  height: 50px;
}
</style>
